<template>
  <div class="orderdetail">
    <Title></Title>
    <div class="orderdetail_box">
      <div class="inner">
        <div class="orderdetail_tit">
          订单的详情
        </div>
        <div class="orderdetail_content">
          <div class="orderdetail_state">
            {{orderdetail.order_status_show}}
          </div>
          <!-- 商品 -->
          <div class="orderdetail_item" v-for="(item,index) in orderdetail.goods">
            <div class="orderdetail_img">
              <img v-if="item.goods_sku_spec_show=='单规格'" :src="[item.goods_img]" alt="">
              <img v-else :src="[item.goods_sku_image]" alt="" srcset="">
              <div class="orderdetail_info">
                <div class="orderdetail_name">
                  {{item.goods_name}}
                </div>
                <div class="orderdetail_type">
                  <span>￥{{item.goods_sku_price}}</span>
                  <span>x{{item.goods_num}}</span>
                </div>
              </div>
            </div>
            <div class="orderdetail_status" v-if="orderdetail.order_status==3">
              <span class="orderdetail_dark" v-if="orderstatus=='评价' ||orderstatus=='全部'"
                @click="evaluateurl(orderdetail.order_id,item)">{{item.is_evaluate==0?'立即评价':'我的评价'}}</span>
              <span class="orderdetail_red" v-if="orderstatus=='售后' ||orderstatus=='全部'"
                @click="saleurl(orderdetail.order_id,item)">{{item.is_after_sales==0?'申请售后':'售后详情'}}</span>
            </div>
          </div>
          <!-- 流程 -->
          <div class="orderdetail_list">
            <div class="orderdetail_listname">
              商品总价
            </div>
            <div class="orderdetail_listnum">
              商品总价
              <span>￥{{orderdetail.order_price}}</span>
            </div>
          </div>
          <div class="orderdetail_list">
            <div class="orderdetail_listname">
              商品优惠
            </div>
            <div class="orderdetail_listnum">
              {{orderdetail.coupon_price=="0.00"?"无":""}}优惠
              <span v-if="orderdetail.coupon_price !='0.00'">￥{{orderdetail.coupon_price}}</span>
            </div>
          </div>
          <div class="orderdetail_list">
            <div class="orderdetail_listname">
              运费
            </div>
            <div class="orderdetail_listnum">
              {{shopname.logistics_type!=1?'':'运费'}}
              <span
                v-if="shopname.logistics_type==1">{{shopname.logistics_type!=1?'包邮':'￥'+shopname.logistics_price}}</span>
            </div>
          </div>
          <div class="orderdetail_list">
            <div class="orderdetail_listname">
              订单编号
            </div>
            <div class="orderdetail_listnum">
              {{orderdetail.order_sn}}
            </div>
          </div>
          <div class="orderdetail_list"
            v-if="orderdetail.order_status==2 || orderdetail.order_status==3 ||orderdetail.order_status== 4">
            <div class="orderdetail_listname">
              物流公司
            </div>
            <div class="orderdetail_listnum">
              {{orderdetail.order_logistics_name}}
            </div>
          </div>
          <div class="orderdetail_list"
            v-if="orderdetail.order_status==2 || orderdetail.order_status==3 ||orderdetail.order_status== 4">
            <div class="orderdetail_listname">
              快递单号
            </div>
            <div class="orderdetail_listnum">
              {{orderdetail.order_logistics_number}}
            </div>
          </div>
          <div class="orderdetail_list">
            <div class="orderdetail_listname">
              下单时间
            </div>
            <div class="orderdetail_listnum">
              {{orderdetail.create_time}}
            </div>
          </div>
          <div class="orderdetail_list" v-if="orderdetail.order_status !=9 && orderdetail.order_status !=0">
            <div class="orderdetail_listname">
              付款时间
            </div>
            <div class="orderdetail_listnum">
              {{orderdetail.pay_time}}
            </div>
          </div>
          <div class="orderdetail_list"
            v-if="orderdetail.order_status==2 || orderdetail.order_status==3 ||orderdetail.order_status== 4">
            <div class="orderdetail_listname">
              发货时间
            </div>
            <div class="orderdetail_listnum">
              {{orderdetail.order_logistics_time}}
            </div>
          </div>
          <div class="orderdetailbtns">
            <div class="orderdetailbtn1" v-if="orderdetail.order_status==2 || orderdetail.order_status==3"
              @click="logistics(orderdetail.order_id)">
              查看物流
            </div>
            <div class="orderdetailbtn1" v-if="orderdetail.order_status==1" @click="urgeorderfn(orderdetail.order_id)">
              催发货
            </div>
            <div class="orderdetailbtn" v-if="orderdetail.order_status==2"
              @click="completeorderfn(orderdetail.order_id)">
              确认取货
            </div>
            <div class="orderdetailbtn1" v-if="orderdetail.order_status==0"
              @click="cancelorderfn(orderdetail.order_id)">
              取消订单
            </div>
            <div class="orderdetailbtn" v-if="orderdetail.order_status==0" @click="payoredrfn(orderdetail.order_id)">
              立即支付
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
  import Title from "../../components/title.vue"
  import {
    orderdetailapi,
    payorderapi,
    cancelorderapi,
    urgeorderapi,
    completeorderapi
  } from "../../api/http.js"
  export default {
    name: 'orderdetail',
    data() {
      return {
        orderstatus: {},
        orderdetail: [],
        shopname: []
      }
    },
    created() {
      this.orderstatus = this.$route.query.orderstatus
      this._getorderdetail({
        order_id: this.$route.query.order_id
      })
    },
    methods: {
      async _getorderdetail({
        order_id
      }) {
        const res = await orderdetailapi({
          order_id
        })
        console.log(res.data.data);
        if (res.data.code == 200) {
          this.orderdetail = res.data.data.order
          this.shopname = res.data.data.mch
        } else {
          this.orderdetail = []
        }
      },
      // 立即支付
      async payoredrfn(id) {
        console.log(id);
        const res = await payorderapi({
          order_id: id
        })
        if (res.data.code == 200) {
          this.$message("支付成功")
          this._getorderdetail({
            order_id: this.$route.query.order_id
          })
        } else if (res.data.code == 400) {
          this.$message("余额不足")
          this.$router.push({
            path: "/layout/balance"
          })
        } else {
          this.$message("支付失败")
        }
      },
      //取消订单
      async cancelorderfn(id) {
        console.log(id);
        const res = await cancelorderapi({
          order_id: id
        })
        if (res.data.code == 200) {
          console.log("000");
          this.$message("取消成功")
          this.$router.push({
            path: "/layout/meorder"
          })
        } else {
          this.$message("失败")
        }
      },
      // 查看物流
      logistics(orderid) {
        console.log(orderid);
        this.$router.push({
          path: "/logistics",
          query: {
            order_id: orderid
          }
        })
      },
      // 催发货
      async urgeorderfn(id) {
        const res = await urgeorderapi({
          order_id: id
        })
        if (res.data.code == 200) {
          this.$message(res.data.msg)
        } else {
          this.$message(res.data.msg)
        }
      },
      // 确认收货
      async completeorderfn(id) {
        const res = await completeorderapi({
          order_id: id
        })
        if (res.data.code == 200) {
          this.$message(res.data.msg)
          this._getorderdetail({
            order_id: this.$route.query.order_id
          })
        } else {
          this.$message(res.data.msg)
        }
      },
      saleurl(orderid, obj) {
        console.log(orderid, obj.goods_sku_id);
        if (obj.is_after_sales === 0) {
          this.$router.push({
            path: "/sale",
            query: {
              order_id: orderid,
              goods_sku_id:obj.goods_sku_id
            }
          })
        } else {
          this.$router.push({
            path: "/saledetail",
            query: {
              order_id: orderid,
              goods_sku_id:obj.goods_sku_id
            }
          })
        }
      },
      evaluateurl(orderid, obj) {
        console.log(orderid, obj);
        if (obj.is_evaluate === 0) {
          this.$router.push({
            path: "/evaluate",
            query: {
              order_id: orderid,
              goods_sku_id:obj.goods_sku_id
            }
          })
        } else {
          this.$router.push({
            path: "/evaluatedetail",
            query: {
              order_id: orderid,
              goods_sku_id:obj.goods_sku_id
            }
          })
        }
      }
    },
    components: {
      Title
    },
  }
</script>

<style lang="less">
  .orderdetail_box {
    width: 100%;
    padding-top: 20px;

    .inner {
      width: 1300px;
      margin: 0 auto;
      padding: 0 85px;
      box-sizing: border-box;

      .orderdetail_tit {
        font-weight: 400;
        font-size: 16px;
        line-height: 40px;
        height: 40px;
        color: #292929;
        margin-bottom: 20px;
      }

      .orderdetail_content {
        width: 100%;
        border: 1px solid #CCCDCE;
        padding: 30px;
        box-sizing: border-box;

        .orderdetail_state {
          font-weight: 400;
          font-size: 16px;
          line-height: 32px;
          height: 32px;
          color: #FF4444;
          margin-bottom: 10px;
        }

        .orderdetail_item {
          width: 70%;
          display: flex;
          justify-content: flex-start;
          margin-bottom: 20px;

          .orderdetail_img {
            width: 70%;
            height: 140px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            img {
              width: 140px;
              height: 140px;
            }

            .orderdetail_info {
              flex: 1;
              height: 100%;
              padding: 20px 10px 10px 10px;
              box-sizing: border-box;
              display: flex;
              justify-content: space-between;
              flex-direction: column;

              .orderdetail_name {
                font-size: 14px;
                line-height: 22px;
                color: #292929;
              }

              .orderdetail_type {
                width: 100%;
                display: flex;
                justify-content: space-between;

                span {
                  &:nth-of-type(1) {
                    color: #FF4444;
                    font-size: 14px;
                  }
                }
              }
            }
          }

          .orderdetail_status {
            width: 30%;
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;

            .orderdetail_dark {
              border: 1px solid #292929;
              color: #292929;
            }

            .orderdetail_red {
              background: #FF4444;
              color: #fff;
              border: 1px solid #FF4444;
            }

            span {
              width: 80px;
              height: 32px;
              font-size: 14px;
              margin: 5px 0;
              border-radius: 10px;
              line-height: 32px;
              text-align: center;
            }
          }
        }

        .orderdetail_list {
          margin-bottom: 10px;
          width: 70%;
          height: 40px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .orderdetail_listname {
            font-size: 14px;
            color: #292929;
          }

          .orderdetail_listnum {
            font-size: 14px;
            color: #9A9A9A;

            span {
              margin: 0 5px;
              color: #292929;
            }
          }
        }

        .orderdetailbtns {
          width: 70%;
          display: flex;
          justify-content: center;
          font-size: 14px;
          align-items: center;
          padding-top: 30px;

          .orderdetailbtn1 {
            width: 80px;
            height: 32px;
            text-align: center;
            line-height: 32px;
            border: 1px solid #292929;
            color: #292929;
            border-radius: 10px;
            margin-right: 10px;
          }

          .orderdetailbtn {
            width: 80px;
            height: 32px;
            text-align: center;
            line-height: 32px;
            background: #FF4444;
            color: #fff;
            border: 1px solid #FF4444;
            border-radius: 10px;
          }
        }
      }
    }
  }
</style>
